<template>
  <div class="app-container">
    <h4 class="form-header h4">基本信息</h4>
    <el-descriptions title="" :column="5" >
      <el-descriptions-item label="姓名" label-class-name="my-label" content-class-name="my-content"> {{form.realName}}</el-descriptions-item>
      <el-descriptions-item label="工号">{{form.jobNumber}}</el-descriptions-item>
      <el-descriptions-item label="手机号码">{{form.wxTel}}</el-descriptions-item>
      <el-descriptions-item label="工会"> {{form.params != null? form.params.deptName:""}}</el-descriptions-item>
      <el-descriptions-item label="单位"> {{form.szdwmc}}</el-descriptions-item>
      <el-descriptions-item label="来校工作时间" > {{form.params != null? form.entryTime:""}}</el-descriptions-item>
      <el-descriptions-item label="离退休时间" > {{form.params != null? form.retirementTime:""}}</el-descriptions-item>
    </el-descriptions>
    <!--<el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="4" :offset="2">
          <el-form-item label="姓名" prop="realName">
            {{form.realName}}
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-form-item label="工号" prop="jobNumber">
            {{form.jobNumber}}
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-form-item label="工会" >
            {{form.params != null? form.params.deptName:""}}
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-form-item label="单位" prop="jobNumber">
            {{form.szdwmc}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" :offset="2">
          <el-form-item label="来校工作时间" prop="realName">
            {{form.params != null? form.entryTime:""}}
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="2">
          <el-form-item label="离退休时间" prop="jobNumber">
            {{form.params != null? form.retirementTime:""}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>-->

    <!--<h4 class="form-header h4">其他记录</h4>-->
    <template >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="入会记录" name="0">
          <el-table v-loading="loading" :data="dataList" >
            <el-table-column label="姓名" align="center" prop="params.realName" />
            <el-table-column label="职工号" align="center" prop="params.jobNumber" />
            <el-table-column label="工会" align="center" prop="params.deptName" />
            <el-table-column label="审核状态" align="center" prop="params.statusName" />
            <el-table-column label="申请时间" align="center" prop="createTime" />
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="listAppMembershipByMiniUserId"
          />
        </el-tab-pane>

        <el-tab-pane label="退会记录" name="1">
          <el-table v-loading="loading" :data="dataList" >
            <el-table-column label="姓名" align="center" prop="params.realName" />
            <el-table-column label="职工号" align="center" prop="params.jobNumber" />
            <el-table-column label="退出工会" align="center" prop="params.deptName" />
            <el-table-column label="审核状态" align="center" prop="params.statusName" />
            <el-table-column label="申请时间" align="center" prop="createTime" />
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>

        <el-tab-pane label="转会记录" name="2">
          <el-table v-loading="loading" :data="dataList" >
            <el-table-column label="姓名" align="center" prop="params.realName" />
            <el-table-column label="职工号" align="center" prop="params.jobNumber" />
            <el-table-column label="转出工会" align="center" prop="params.deptNameOut" />
            <el-table-column label="转入工会" align="center" prop="params.deptNameInto" />
            <el-table-column label="审核状态" align="center" prop="params.statusName" />
            <el-table-column label="申请时间" align="center" prop="createTime" />
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>

        <el-tab-pane label="补助申报记录" name="3">
          <el-table v-loading="loading" :data="dataList" >
            <el-table-column label="姓名" align="center" prop="params.realName" />
            <el-table-column label="工号" align="center" prop="params.jobNumber" />
            <el-table-column label="工会" align="center" prop="params.deptName" />
            <el-table-column label="审核状态" align="center" prop="params.statusName" />
            <el-table-column label="申报补助年度" align="center" prop="params.medicalFee.zdfpsj" />
            <el-table-column label="公费医疗总金额" align="center" prop="params.medicalFee.zfzfy" />
            <el-table-column label="100%自费金额" align="center" prop="params.medicalFee.qzfblfy" />
            <el-table-column label="自付费总金额" align="center" prop="params.medicalFee.deductible" />
            <el-table-column label="审定自付费总金额" align="center" prop="params.medicalFee.auditedDeductible" />
            <el-table-column label="申请时间" align="center" prop="createTime" width="150"/>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </template>



    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <!--<el-button type="primary" @click="reply()" >回复</el-button>-->
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {  getSysMiniUser } from "@/api/user/SysMiniUser";
import { listAppMembershipByMiniUserId} from "@/api/approval/appMembership";
import { listAppWithdrawalByMiniUserId} from "@/api/approval/appWithdrawal";
import { listAppTransferByMiniUserId} from "@/api/approval/appTransfer";
import { listAppSubsidyByMiniUserId} from "@/api/approval/appSubsidy";
export default {
  name: "memberDetail",
  data() {
    return {
      // 是否显示弹出层
      open: false,
      activeName: '0',
       // 遮罩层
      loading: true,
      // 分页信息
      total: 0,
      pageNum: 1,
      pageSize: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        miniUserId:null
      },
      // 用户信息
      form: {},
      dataList:[]
    };
  },
  created() {
    const id = this.$route.params && this.$route.params.id;
    getSysMiniUser(id).then((response) => {
      this.form = response.data;
    });

    this.queryParams.miniUserId=id;
    this.listAppMembershipByMiniUserId();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
      this.activeName=tab.name;
      if(tab.name=='0'){
        this.listAppMembershipByMiniUserId();
      }
      if(tab.name=='1'){
        this.listAppWithdrawalByMiniUserId();
      }
      if(tab.name=='2'){
        this.listAppTransferByMiniUserId();
      }
      if(tab.name=='3'){
        this.listAppSubsidyByMiniUserId();
      }
    },
    listAppMembershipByMiniUserId(){
      this.loading = true;
      listAppMembershipByMiniUserId(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    listAppWithdrawalByMiniUserId(){
      this.loading = true;
      listAppWithdrawalByMiniUserId(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    listAppTransferByMiniUserId(){
      this.loading = true;
      listAppTransferByMiniUserId(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    listAppSubsidyByMiniUserId(){
      this.loading = true;
      listAppSubsidyByMiniUserId(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getList(){

    },
    cancel() {
      this.open = false;
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/user/member" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
